<template>
  <el-container class="login-con">
    <el-header class="login-one">
      <el-row>
        <el-col :span="8">
          <div style="margin-top: 5px;">
            <img src="../../../static/image/niu.jpg" width="50" height="50" style="border-radius: 50%;" />
            <span>用户名:{{userName}}</span>
          </div>
        </el-col>
        <el-col :span="16" class="login-two">
          <div style="margin-top: 10px;">
            <el-button type="success" round @click="loginOut"><i class="el-icon-circle-close"></i>退出登录</el-button>
            <!-- <router-link :to="{name:'loginEle'}"><el-button type="success" round><i class="el-icon-circle-close"></i>退出登录</el-button></router-link> -->

          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="220px" >
        <el-menu :default-openeds="['1','2']" router>
          <template v-for="x in node">
            <el-submenu :index="x.index">
              <template slot="title"><i class="el-icon-message"></i>{{x.name}}
              </template>
              <template v-for="y in x.children">
                <el-menu-item :index="y.url" ><i class="el-icon-message"></i>{{y.name}}</el-menu-item>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <router-view />
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  import myUtil from '../../util/myUtil.js';
  export default {
    name: "indexEle",
    data() {
      return {
        userInfo: { //定义用户对象
          userName: "",
          userPwd: ""
        },
        userName: "",
        node: [{
            index: '1',
            name: "个人账号管理",
            children: [{
                url: "/userInfoEle",
                name: "个人信息"
              },
              {
                url: "/changePwdEle",
                name: "快速改密"
              }
            ]
          },
          {
            index: '2',
            name: "系统管理",
            children: [{
                url: "/userListEle",
                name: "用户管理"
              },
              {
                url: "/powerListEle",
                name: "权限管理"
              },
              {
                url: "/roleListEle",
                name: "角色管理"
              }
            ]
          },
          {
            index: '3',
            name: "人员档案",
            children: [{
              url: "/employeeList",
              name: "员工基本信息维护"
            },
            {
              url: "/recordList",
              name: "员工档案管理"
            },
            {
              url: "/contractList",
              name: "员工合同管理"
            },
            ]
          },
          {
            index: '4',
            name: "人事调配",
            children: [{
              url: "/transferList",
              name: "人事调动管理"
            } ]

          },
          {
            index: '5',
            name: "考勤管理",
            children: [{
              url: "/attendanceListEle",
              name: "考勤记录"
            },
             {
               url: "/salaryListEle",
               name: "薪酬记录"
             }]

          },
          {
            index: '6',
            name: "招聘管理",
            children: [{
              index: '6_1',
              name: "简历",
              children:[{
                url: "/applyList",
                name: "简历列表"
              }],
              index: '6_2',
              name: "招聘",
              children:[{
                url: "/applyAdd",
                name: "招聘流程"
              },
              ]
            },
            ]

          },
          {
            index: '7',
            name: "数据统计",
            children: [{
              url: "/hello",
              name: "员工"
            },{
              url:"/hello2",
              name:"薪酬"
            }

            ]
          }
        ]
      }
    },
    methods: {
      loadPower() {
        var mythis = this;
        $.ajax({
          url: myUtil.url + "/power/selectPower",
          type: "get",
          data: {
            "userName": mythis.userName
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.node = data.info
          }
        })
      },

      loginOut() { //退出功能
        var mythis = this;
        $.ajax({
          url: myUtil.url + "/user/logout",
          type: "get",
          data: mythis.userInfo,
          success: function(data) {
            console.log(data);
            alert(data.info);
            if (data.info == "退出成功") {
              mythis.$router.replace("/loginEle");
            }
          }
        })
      }
    },
    mounted() {
      //取出本地存储的用户名和用户编号
      this.userName = localStorage.getItem("userName");
      this.userId = localStorage.getItem("userId");
      this.loadPower();
    }
  }
</script>

<style>
  html,
  body {
    height: 100%;
  }

  .login-one {
    background-color: #1c77ac;
    background-image: url(../../../static/image/beijing3.png);
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }

  .login-two {
    text-align: right
  }

  .login-con {
    background-color: #1c77ac;
    background-image: url(../../../static/image/beijing.png);
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }
</style>
